<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<a href="index.html">返回</a>
<div id="app">
<!--   这里发现第二个坑 <s1/> 结束的话，后面的组件就不出来了 -->
    <s1></s1>
    <s2></s2>
</div>
<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    const sch = Vue.extend({
        name:'School',
        data (){  //data的第二种写法
            return{
                sch:{
                    name:"衡水学校",
                    addr:"衡水路边"
                }
            }
        } ,
        // 出了一个问题，后来发现模板必须有一个根目录
        template:`
          <div>
          <h3>学校信息</h3>
          <p>{{sch.name}}-{{sch.addr}}</p>
          </div>
        `
    })
    const student = Vue.extend({
        data (){  //data的第二种写法
            return{
               stu:{
                   name:"张三",
                   age:19
               }
            }
        } ,
        template:`
          <div>
          <h3>学生信息</h3>
          <p>{{stu.name}}-{{stu.age}}</p>
          </div>
        `
    })
     new Vue({
         el:"#app",
         components :{
             s1:student,
             s2:sch
         }
      })
</script>
</body>
</html>